<template>
  <div class="root">
    <!-- 上方的选择区域 -->
    <div class="selectPlace">
      <el-dropdown>
        <label class="el-dropdown-link">
         <span style="font:18px large;font-weight:bold"> {{ initName }}</span><i class="el-icon-arrow-down el-icon--right"></i>
        </label>
        <el-dropdown-menu slot="dropdown">
          <div v-for="(item, index) in dropArr" :key="item.label">
            <div class="drop_item" @click="chooseItem(item.label)">
              {{ item.label }}
            </div>
          </div>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!-- 中部的文本区域 -->
    <div class="borderPlace">
      <div class="centerPlace">
        <div class="contentPlace">
          <el-form ref="form" :model="form" label-width="80px">
            <div class="title">
              <el-input placeholder="请输入一个标题" v-model="form.title">
              </el-input>
            </div>
            <div class="split"></div>

            <div class="content">
              <el-input
                type="textarea"
                :rows="10"
                placeholder="这条备注是关于什么的？
             "
                v-model="form.content"
              >
              </el-input>
            </div>
          </el-form>
        </div>
      </div>
      <!-- 底部功能区域 -->
      <div class="toolPlace">
        <div class="btnPlace">
          <el-button
            style="border-radius: 30px; background: #0bbd87; color: white"
            @click="submitForm"
            >保存</el-button
          >
          <el-button style="border-radius: 30px">取消</el-button>
        </div>
        <div class="uploadPlace">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <span
              class="el-icon-paperclip"
              style="margin-left: 10px; margin-top: 3px; flex: 2; width: 100px"
              >附件文件</span
            >
          </el-upload>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="showPlace">
        <div class="showItemCard" v-for="item in showList" :key="item.type">
          <div class="left">
            <div class="showWhotPlace">
              <span style="font: 18px large; font-weight: bold">{{
                item.author
              }}</span>
              <span>·</span>
              <span>{{ timeTransToDay(item.time) }}</span>
            </div>

            <div class="showTitlePlace" style="margin-top: 20px">
              <span style="font: 18px large">{{ item.title }}</span>
            </div>

            <div class="showContentPlace" style="margin-top: 20px">
              <span style="font: 14px Base">{{ item.content }}</span>
            </div>

            <div
              class="showFilePlace"
              v-show="matchType(item.attachment) == 'pdf'"
              style="margin-top: 20px; margin-bottom: 20px"
            >
              <img style="width: 40px" src="../icon/PDF.png" />
              <a style="margin-top:10px;margin-right:10px" :href="item.attachment"> {{item.attachment}} </a>
              <!-- <img style="width:200px" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3787296047,921441593&fm=26&gp=0.jpg"> -->
              <!-- <p>{{ item.attachment }}</p>
              <img
                style="width: 30px; margin-left: 10px"
                class="downloadIcon"
                src="../icon/download.png"
                @click="downloadFile(item.attachment)"
              /> -->
            </div>
          </div>

          <div class="right">
            <div style="margin-bottom: 200%">
              <span
                style="font-size: 20px; margin-right: 20px"
                class="icon el-icon-s-comment"
              ></span>
              <span
                style="font-size: 20px; margin-right: 20px"
                class="icon el-icon-delete"
              ></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    >
  </div>
</template>

<script>
import { getNote } from "../api/testApi";
import { ComSubmitForm } from "../api/testApi";
import qs from "qs";
import { timeTransToDay } from "../api/common";
export default {
  data() {
    return {
      initName: "所有备注",
      title: "",
      content: "",
      form: {},
      dropArr: [], //上方的下拉菜单
      showList: "", //下方的展示列表
      query: {
        _id: "5fdac51570a56dffacfd8fbb",

        company_id: "abc",

        app_id: "abc",

        modul_id: "bbc",

        role_id: "222",

        layout_id: "888888",
      },
      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
    };
  },
  methods: {
    chooseItem(item) {
      this.initName = item;
      console.log(item);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    init() {
      getNote(this.query).then((response) => {
        this.dropArr = response.data.data.filter;
        this.showList = response.data.data.memos;
        console.log(this.showList);
      });
    },

    submitForm() {
      let requestData = qs.stringify({
        postData: JSON.stringify(this.form),
      });
      ComSubmitForm("/momeapi/minicrmapp/test/memo/", requestData).then(
        (response) => {
          console.log(response);
        }
      );
    },

    timeTransToDay(timestamp) {
      return this.$moment(timestamp * 1).format("YYYY-MM-DD ");
    },

    matchType(fileName) {
      console.log(fileName);

      // 后缀获取
      var suffix = "";
      // 获取类型结果
      var result = "";
      try {
        var flieArr = fileName.split(".");
        suffix = flieArr[flieArr.length - 1];
      } catch (err) {
        suffix = "";
      }
      // fileName无后缀返回 false
      if (!suffix) {
        result = false;
        return result;
      }
      // 图片格式
      var imglist = ["png", "jpg", "jpeg", "bmp", "gif"];
      // 进行图片匹配
      result = imglist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = "image";
        return result;
      }
      // 匹配txt
      var txtlist = ["txt"];
      result = txtlist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = "txt";
        return result;
      }
      // 匹配 excel
      var excelist = ["xls", "xlsx"];
      result = excelist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = "excel";
        return result;
      }
      // 匹配 word
      var wordlist = ["doc", "docx"];
      result = wordlist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = "word";
        return result;
      }
      // 匹配 pdf
      var pdflist = ["pdf"];
      result = pdflist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = "pdf";
        return result;
      }
      // 匹配 ppt
      var pptlist = ["ppt"];
      result = pptlist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = "ppt";

        return result;
      }
      // 匹配 视频
      var videolist = ["mp4", "m2v", "mkv"];
      result = videolist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = "video";
        return result;
      }
      // 匹配 音频
      var radiolist = ["mp3", "wav", "wmv"];
      result = radiolist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = "radio";
        return result;
      }
      // 其他 文件类型
      result = "other";

      return result;
    },
    downloadFile(item) {
      window.open(item);
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style scoped>
.root {
  min-width: 960px;
}
.selectPlace {
  display: flex;
  margin-left: 5.2%;
}
.borderPlace {
  display: flex;
  flex-direction: column;
  background: #ebeef5;
  border-radius: 15px;
  width: 47.6%;
  padding: 0px;
  margin-left: 5%;
}

.contentPlace {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  background: white;
  width: 95%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.btnPlace {
  float: left;
  margin-left: 15px;
}
.split {
  border: none;
  height: 1px;
  width: 97%;
  border-bottom: 1px dashed #c0c4cc;
  margin-left: 1.5%;
}
.toolPlace {
  display: flex;

  margin-bottom: 10px;
  margin-top: 10px;
}
.uploadPlace {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
  margin-left: 50px;
}
.centerPlace {
  display: flex;
  justify-content: center;
  align-items: center;
}

.drop_item {
  list-style: none;
  line-height: 36px;
  padding: 0 20px;
  margin: 0;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  outline: 0;
}
.drop_item:hover {
  color: #409eff;
}

/* 下方的显示区域的css */
.showItemCard {
  display: flex;
  flex-direction: row;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin-top: 10px;
  width: 50%;
  margin-left: 0.1%;
  justify-content: center;

  align-content: center;
}
.showItemCard:hover {
 background: #ebeef5;
}
.left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 20px;
  flex: 8;
}
.right {
  display: flex;
  align-items: flex-end;
  flex-direction: row;
}
.showFilePlace {
  display: flex;
  flex-direction: row;
  border: 1px black;
  border-radius: 100px;
  background: white;
  line-height: 20px;
}
.downloadIcon {
  border-radius: 50%;
  justify-content: flex-end;
  background: #f0f8ff;
  margin-right: 10px;
}
/* .downloadIcon:hover{
    border-radius: 1000px;
    background: #F0F8FF;
} */
/* .icon:hover{
    border-radius: 100px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    font-size:30px !important;
    
} */
.showPlace {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  margin-left: 5%;
}
.bottom {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}
</style>

<style >
.title input.el-input__inner {
  border: none;
  border-radius: 0;
  /* border-bottom: 1px dashed #c0c4cc; */
}
.content textarea.el-textarea__inner {
  border-radius: 0;
  border: none;
}

.uploadPlace div.upload-demo {
  /* border: solid; */
  display: flex;
  flex-direction: row;
}
.uploadPlace ul.el-upload-list.el-upload-list--text {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  /* border: solid; */
  margin-top: -15px;
}
.uploadPlace li.el-upload-list__item.is-success {
  /* border: solid; */
  position: relative;
  display: inline;
}
</style>